<template>
    <div>
        <div class="swiper-container common">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(items, index) in picList" :key="index">
                    <img :src="items.image_url" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
    </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
    props: {
        picList: {

        }
    },
    mounted() {
        new Swiper('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            // effect: 'flip',
            autoplay: {
                autoplay: true,
                delay: 4000,
            },
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // // 如果需要滚动条
            // scrollbar: {
            //     el: '.swiper-scrollbar',
            // },

        })
    },
}
</script>

<style lang="less">
.swiper-container {
    height: 500px;

    .swiper-wrapper {

        .swiper-slide {
            img {
                width: 1200px;
                // background:no-repeat center;
                background-size: contain;

            }
        }
    }
}
</style>